<script setup>
import { useEcharts, echartsObj } from '../composables/useEcharts';
import { onMounted, ref } from 'vue';
import axios from 'axios';
const dataTwo = ref({})
const twoChart = ref(null)

const getData = async () => {
  const res = await axios.get('/two/data')
  dataTwo.value = res.data.chartTwo.chartData
}
onMounted(() => {
  getData().then(() => {
    const echartsInstance = useEcharts(twoChart.value)
    echartsInstance.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross', // 指示器类型
          label: {
            backgroundColor: '#e6b600'
          }
        }
      },
      legend:{
        data: ['药品', '服饰', '家电', '数码', '装备']
      },
      grid:{
        left: '1%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: dataTwo.value.day,
        axisLine:{
          lineStyle:{color:'#fff'}
        }
      },
      yAxis: {
        type: 'value',
        axisLine:{
          lineStyle:{color:'#fff'}
        }
      },
      series: [
        {
          name: '药品',
          data: dataTwo.value.num.Chemicals,
          type: 'line',
          smooth: true,
          showSymbol: false,
          stack: "Total",
          lineStyle: {
            width: 0
          },
          emphasis: {
            focus: 'series'
          },
          areaStyle: {
            opacity: 0.8,
            color: new echartsObj.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#80FFA5' },
              { offset: 1, color: '#01BFEA' },
            ]),
          }
        },
        {
          name: '服饰',
          data: dataTwo.value.num.Clothes,
          type: 'line',
          stack: "Total",
          smooth: true,
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echartsObj.graphic.LinearGradient(0, 0, 0,
              1, [
              {
                offset: 0,
                color: "#00DDFF",
              },
              {
                offset: 1,
                color: "#4D77FF",
              },
            ]),
          },
          lineStyle: { // 设置线段样式
            width: 0,
          },
          emphasis: {//设置高亮的图形样式和标签样式 
            focus: "series",//只显示选中的内容高亮
          },
        },
        {
          name: '家电',
          data: dataTwo.value.num.Electrical,
          type: 'line',
          stack: "Total",
          smooth: true,
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echartsObj.graphic.LinearGradient(0, 0, 0,
              1, [
              {
                offset: 0,
                color: "#37A2FF",
              },

              {
                offset: 1,
                color: "#7415DB",
              },
            ]),

          },
          lineStyle: { // 设置线段样式
            width: 0,
          },
          emphasis: {//设置高亮的图形样式和标签样式 
            focus: "series",//只显示选中的内容高亮
          },
        },
        {
          name: '数码',
          data: dataTwo.value.num.digit,
          type: 'line',
          stack: "Total",
          smooth: true,
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echartsObj.graphic.LinearGradient(0, 0, 0,
              1, [
              {
                offset: 0,
                color: "#FF0087",
              },
              {
                offset: 1,
                color: "#87009D",
              },
            ]),

          },
          lineStyle: { // 设置线段样式
            width: 0,
          },
          emphasis: {//设置高亮的图形样式和标签样式 
            focus: "series",//只显示选中的内容高亮
          },
        },
        {
          name: '装备',
          data: dataTwo.value.num.gear,
          type: 'line',
          smooth: true,
          stack: "Total",
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echartsObj.graphic.LinearGradient(0, 0, 0,
              1, [
              {
                offset: 0,
                color: "#FFBF00",
              },
              {
                offset: 1,
                color: "#E03E4C",
              },
            ]),

          },
          lineStyle: { // 设置线段样式
            width: 0,
          },
          emphasis: {//设置高亮的图形样式和标签样式 
            focus: "series",//只显示选中的内容高亮
          },
        },
      ]
    })
  })

})
</script>

<template>
  <div>
    <h2>周销图</h2>
    <div class="chart" ref="twoChart"></div>
  </div>
</template>

<style lang="less" scoped>
.chart {
  height: 4.5rem;
}

h2 {
  height: .6rem;
  color: #fff;
  line-height: .6rem;
  font-size: 0.25rem;
  text-align: center;
}
</style>
